<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-17 14:13:05
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="feedback animated bounceInRight">
    <div class="header">
      <div @click="histry">
        <img src="../../assets/histry.png">
        返回
      </div>
      <span class="reg" style="margin-left:-0.4rem;">我的建议</span>
      <span class="log"></span>
    </div>
    <div class="con">
        <p>选择问题类型</p>
        <dl>
            <dd v-for='(i,index) in list' :key="index" @click="yijian_type(index)">
                <p :class="i.toggle_flag==1?'p1':'p2'"></p>{{i.name}}
            </dd>
        </dl>
    </div>
    <div style="height:0.1rem;background:#eee;"></div>
    <van-cell-group>
        <van-field
            v-model="text"
            rows="2"
            autosize
            type="textarea"
            maxlength="500"
            placeholder="描述您遇到的问题（500字以内）"
        />
    </van-cell-group>
    <div class="tu_box">
        <p class="text_shang">上传照片（{{surplus}}/9）</p>
        <div class="shang_top">
            <div class="item" v-for="(i, index) in imgBase64" :key='index'>
                <span class="cancel-btn" @click="delImg(index)">x</span>
                <img :src="i">
            </div>
            <div class="shang_t" v-if="yincang">
                <input type="file" @change="getImgBaseb()" class="touxiang_shang">
                <div class="tupian_dian">
                    <img class="tupian" src="../../assets/tupian.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <div style="height:0.1rem;background:#eee;margin-top:0.2rem;"></div>
    <p class="bottom">联系手机号&nbsp;&nbsp;<input type="text" :value="phone"></p>
    <div style="background:#eee;height:0.69rem;padding-top:0.1rem;">
        <div class="btna" @click="sure">确定</div>
    </div>
  </div>
</template>

<script>
import { check_login,add_my_advise } from "../../api/api.js";
export default {
  name: "feedback",
  data() {
    return {
      phone:'',
      list:[
          {
              name:'新需求',
              index:'1',
              toggle_flag:'1'
          },
          {
              name:'界面展示速度优化',
              index:'2',
              toggle_flag:'0'
          },
          {
              name:'核心功能缺失',
              index:'3',
              toggle_flag:'0'
          },
          {
              name:'界面无法交互',
              index:'4',
              toggle_flag:'0'
          },
          {
              name:'图形逻辑错误',
              index:'5',
              toggle_flag:'0'
          },
          {
              name:'数值计算错误',
              index:'6',
              toggle_flag:'0'
          },
          {
              name:'其他',
              index:'7',
              toggle_flag:'0'
          },
      ],
        data_type:'1',
        text:'',
        surplus:0,
        imgBase64:[],
        xin:[],
        lei:[],
        yincang:true,
        user_id:''
    };
  },
  mounted() {
    if (sessionStorage.getItem("mobile") != null) {
      this.phone = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.phone
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    })
  },
  created(){
      if (sessionStorage.getItem("data_mobal") != null) {
        this.user_id = JSON.parse(
          JSON.parse(sessionStorage.getItem("data_mobal"))
        ).user_id;
      }
  },
  watch: {
      imgBase64(){
          this.surplus=this.imgBase64.length
          if(this.imgBase64.length>=9){
              this.yincang=false
          }else{
              this.yincang=true
          }
      }
  },
  methods: {
    // 返回上一层
    histry() {
      this.$router.go(-1);
    },
    // 意见类型
    yijian_type(index){
        this.list[index].toggle_flag='1'
        this.data_type=this.list[index].index
        for(let i=0;i<this.list.length;i++){
            if(i!=index){
                this.list[i].toggle_flag=0
            }
        }
    },
    // 打开相册
    getImgBaseb(){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      _this.lei.push(file.name.substring(file.name.indexOf("."), file.name.length));
      //转base64
      reader.onload = function(e) {
        _this.imgBase64.push(e.target.result);
        _this.xin.push(e.target.result.substring(
          e.target.result.indexOf(",") + 1,
          e.target.result.length
        ));
      };
      reader.readAsDataURL(file);
      console.log(this.imgBase64)
      console.log(this.xin)
      console.log(this.lei)
    },
    // 点击删除
    delImg(i){
        this.imgBase64.splice(i,1);
    },
    sure(){
        var adv_type=''
        for(let i=0;i<this.list.length;i++){
            if(this.list[i].toggle_flag==1){
                adv_type=this.list[i].index
            }
        }
        if(this.text==''){
            this.text=null
        } 
        if(this.lei==[]){
            this.lei=null
            this.xin=null
        }else{
            this.lei=this.lei.join(' ')
            this.xin=this.xin.join(' ')
        }
        add_my_advise({data:{
            user_id:this.user_id,
            mobile:this.phone,
            adv_txt:this.text,
            adv_data:this.xin,
            adv_data_type:this.lei,
            adv_type:adv_type
        }}).then(res=>{
            console.log(res)
            if(res.data.code==10071){
                this.$router.push('/feedbackok')
            }else if(res.data.code==10072){
                this.$toast('提交失败')
            }
        })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.feedback {
  height: 100vh;
  background: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.5rem;
    line-height: 0.5rem;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid #eee;
    div {
      display: flex;
      justify-content: left;
      align-items: center;
      color: #979797;
      font-size: 0.14rem;
      img {
        height: 0.16rem;
        width: 0.08rem;
        margin-right: 0.08rem;
      }
    }
    .reg {
      font-size: 0.18rem;
      color: #1a2533;
      font-weight: 500;
    }
    .log {
      font-size: 0.14rem;
      color: #e82716;
      font-weight: bold;
    }
  }
  .con{
      p{
          font-size: 0.14rem;
          color:#1A2533;
          margin:0.07rem 0 0.1rem 0.15rem;
      }
      dl{
          height:1.34rem;
          width:100%;
          dd{
              width:50%;
              float: left;
              font-size: 0.14rem;
              color:#888888;
              display: flex;
              justify-content: left;
              align-items: center;
              line-height: 0.3rem;
              p{
                height:0.14rem;
                width:0.14rem;
                border-radius: 50%;
                margin:0 0.1rem 0 0.16rem;
            }
            .p1{
                background-color: #A5C6FD;
                border:0.01rem solid #A5C6FD;
            }
            .p2{
                background-color: #fff;
                border:0.01rem solid #C8C3C3;
            }
          }
          
      }
  }
    .tu_box{
        margin-top:0.08rem;
        padding: 0 0.15rem;
        .text_shang{
            font-size: 0.14rem;
            color:#1A2533;
            margin-bottom: 0.06rem;
        }
        .shang_top{
            .item{
                position: relative;
                display: inline-block;
                span{
                    height:0.2rem;
                    width:0.2rem;
                    background: #282828;
                    border-radius: 50%;
                    position: absolute;
                    right: 0;
                    top:0;
                    text-align: center;
                    line-height: 0.18rem;
                    color:#ccc;
                    z-index: 10;
                }
                img{
                    height:0.95rem;
                    width:0.95rem;
                    margin:0.05rem 0.1rem 0.05rem 0;
                }
            }
            .shang_t{
                display: inline-block;
                position: relative;
                .tupian_dian{
                    height:1.05rem;
                    width:1.05rem;
                    img{
                        height:1.05rem;
                        width:1.05rem;
                    }
                }
                .touxiang_shang{
                    height:1.05rem;
                    width:1.05rem;
                    position: absolute;
                    top:0;
                    left:0;
                    border:1px solid red;
                    opacity: 0;
                }
            }
        }
    }
    .bottom{
        height:0.42rem;
        padding: 0 0.15rem;
        line-height: 0.42rem;
        font-size: 0.14rem;
        color:#1A2533;
        input{
            width:70%;
            border:none;
        }
    }
    .btna{
        width:3.45rem;
        height:0.47rem;
        background:linear-gradient(270deg,rgba(252,101,101,1) 0%,rgba(232,39,22,1) 100%);
        border-radius:0.02rem;
        margin: 0 auto;
        text-align: center;
        line-height: 0.47rem;
        color: #fff;
        font-size: 0.16rem;
    }
}
</style>